<!DOCTYPE html>
<html lang="zh-cn"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head th:replace="common::head"></head>
<body>
<div th:replace="common::top"></div>
<br/>
<h2>产品管理</h2>
<br/>

<table>
    <tr>
        <td><b>客户:</b></td>
        <td th:text="${order.customName}" colspan="5"></td>
    </tr>
    <tr>
        <td><b>编码:</b></td>
        <td th:text="${order.code}"></td>
        <td><b>ID:</b></td>
        <td th:text="${order.id}"></td>
        <td><b>订单总量:</b></td>
        <td th:text="${order.orderNum}"></td>
    </tr>
    <tr>
        <td><b>状态:</b></td>
        <td th:text="${order.status}==1?'正常':'撤销'"></td>
        <td><b>已上产线:</b></td>
        <td th:text="${order.confirm}?'是':'否'"></td>
        <td><b>生产总量:</b></td>
        <td th:text="${order.produceNum}"></td>
    </tr>
    <tr>
        <td><b>合同金额:</b></td>
        <td th:text="${order.contractAmount}/100"></td>
        <td><b>销售:</b></td>
        <td th:text="${order.createUser}"></td>
        <td><b>发送总量:</b></td>
        <td th:text="${order.sendNum}"></td>
    </tr>
    <tr>
        <td><b>实收金额:</b></td>
        <td th:text="${order.actualAmount}/100"></td>
        <td><b>创建时间:</b></td>
        <td th:text="${#dates.format(order.createTime,'yyyy-MM-dd')}"></td>
        <td><b>退货总量:</b></td>
        <td th:text="${order.refundNum}"></td>
    </tr>
</table>
<br/>
<table>
    <thead>
    <tr style="background-color: dimgrey;">
        <th>产品信息</th>
    </tr>
    <tr>
        <th>操作者</th>
        <th>产品</th>
        <th>数量</th>
        <th>已生产</th>
<!--        <th>缺口</th>-->
        <th>生产</th>
        <th>已发货</th>
        <!-- 第一版发货取消
        <th>
            <form th:action="@{send}" method="post" id="send">
                <input type="number" name="orderId" th:value="${order.id}" hidden="hidden">
                <input type="submit" value="发 货" style="width: 78px;">
            </form>
        </th>
        -->
        <th>已退货</th>
        <th>退货</th>
    </tr>
    </thead>
    <tbody id="batch">
    <tr th:each="item : ${batchList}">
        <td th:text="${item.produceUsers}" style="max-width:150px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;"></td>
        <td th:text="${item.productName}"></td>
        <td th:text="${item.orderNum}"></td>
        <td th:text="${item.produceNum}"></td>
<!--        <td th:text="${item.produceGap}" th:style="${item.produceGap}==0 ? 'color:green':'color:red' "></td>-->
        <td>
            <form th:action="@{product}" method="post" class="product">
                <input type="number" name="id" th:value="${item.id}" hidden>
                <input type="number" name="producedNumber" th:placeholder="${item.produceGap}" th:max="${item.produceGap}" style="width:70px;">
                <input type="submit" value="生产">
            </form>
        </td>
        <td th:text="${item.sendNum}"></td>
        <!-- 第一版发货取消
        <td>
            <input type="number" th:value="${item.id}" hidden="hidden">
            <input type="number" th:placeholder="${item.sendGap}" th:max="${item.sendGap}" style="width:70px;" min="1" >
        </td>
        -->
        <td th:text="${item.refundNum}"></td>
        <td>
            <form th:action="@{refund}" method="post" class="refund">
                <input type="number" name="id" th:value="${item.id}" hidden>
                <input type="number" name="refundNumber" style="width:70px;">
                <input type="submit" value="退货">
            </form>
        </td>
    </tr>
    </tbody>
</table>
<br/>
<div style="border: 1px solid #a19c9c; background-color: #dcdcdc; width: fit-content; margin: auto; padding: 20px;">
    <label>发货单:</label>
    <table th:each="item,stat:${sendMap}" style="margin-bottom: 30px;">
        <tr th:object="${stat.current.key}">
            <td th:text="'第:[' + *{sequence} + ']次'"></td>
            <td th:text="'操作人:' + *{createUser} "></td>
            <td th:text="'日期:' + *{#dates.format(createTime,'yyyy-MM-dd')} "></td>
        </tr>
        <tr>
            <td>序号</td>
            <td>产品</td>
            <td>发货数量</td>
        </tr>
        <tr th:each="e:${stat.current.value}">
            <td th:text="${eStat.index+1}"></td>
            <td th:text="${e.productName}"></td>
            <td th:text="${e.number}"></td>
        </tr>
    </table>
</div>
<br/>
<div style="border: 1px solid #a19c9c; background-color: #dcdcdc; width: fit-content; margin: auto; padding: 20px;">
<label>退货记录:</label>
<table>
    <thead>
    <tr>
        <th>序号</th>
        <th>产品</th>
        <th>退货数量</th>
        <th>操作人</th>
        <th>退货时间</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="e : ${refundList}">
        <td th:text="${eStat.index+1}"></td>
        <td th:text="${e.productName}"></td>
        <td th:text="${e.number}"></td>
        <td th:text="${e.createUser}"></td>
        <td th:text="${#dates.format(e.createTime,'yyyy-MM-dd HH:mm')}"></td>
    </tr>
    </tbody>
</table>
</div>
<p>
    <a href="javascript:history.back(-1);">上一页</a>
    <a href="../index.html" th:href="@{/index.html}">主页</a>
</p>

<script>
    $(".product").submit(function(e){
        e.preventDefault();

        $.ajax({
            type: $(e.target).attr("method"),
            url: $(e.target).attr("action"),
            data: $(e.target).serialize(),
            success: function(response){
                window.location.reload();
            },
            error: function(response){
                alert("提交失败");
            }
        });
    });

    $("#send").submit(function(e){
        e.preventDefault();

        var orderId = $('input[name=orderId]').val();

        var arr = [];
        $("#batch tr").each(function(){
            var obj = {};
            obj.batchId = $(this).find("td:eq(6) input:eq(0)").val();
            obj.number = $(this).find("td:eq(6) input:eq(1)").val();
            arr.push(obj);
        });

        $.ajax({
            type: $(e.target).attr("method"),
            url: $(e.target).attr("action"),
            data: $(e.target).serialize() + '&batchJson=' + JSON.stringify(arr),
            success: function(response){
                alert("提交成功");
                window.location.reload();
                //window.location.href="detail.html?orderId="+orderId;
            },
            error: function(response){
                alert("提交失败");
            }
        });
    });

    $(".refund").submit(function(e){
        e.preventDefault();

        $.ajax({
            type: $(e.target).attr("method"),
            url: $(e.target).attr("action"),
            data: $(e.target).serialize(),
            success: function(response){
                window.location.reload();
            },
            error: function(response){
                alert("提交失败");
            }
        });
    });
</script>
</body>
</html>